<template>
    <!-- 900px宽度的弹框 适用5个字段以上 -->
    <el-dialog
        :title="dialogOption.title"
        :visible.sync="dialogOption.visible"
        v-dialogDrag
        class="small_dialog"
        :before-close="beforeClose"
    >
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="工号" prop="code">
                <el-input
                    v-model="form.code"
                    autocomplete="off" clearable
                    placeholder="请输入工号"
                ></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input
                    v-model="form.name"
                    autocomplete="off" clearable
                    placeholder="请输入姓名"
                ></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="form.sex" clearable placeholder="请选择性别">
                    <el-option
                        v-for="item in sexOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日" prop="birth">
                <!-- <el-input v-model="form.birth" autocomplete="off"></el-input> -->
                <el-date-picker
                    v-model="form.birth_day" value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="请选择生日"
                    style="width: 100%"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input
                    v-model="form.phone"
                    autocomplete="off" clearable
                    placeholder="请输入电话"
                ></el-input>
            </el-form-item>
            <el-form-item label="电子邮件" prop="email">
                <el-input
                    v-model="form.email"
                    autocomplete="off" clearable
                    placeholder="请输入电子邮件"
                ></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="group_sid">
                <!-- <el-input v-model="form.group_sid" autocomplete="off"></el-input> -->
                <!-- <vSelectTree
                  :model="form"
                  :options="option"
                  :treeOptions="treeOptions1"
                  :treeData="treeData"
                  @event="handleTreeEvent"
                ></vSelectTree> -->
                <vSelectEdit
                    v-model="form.group_sid"
                    :options="option"
                    :treeOptions="treeOptions1"
                    :data_list="treeData"
                    @event="handleTreeEvent"
                ></vSelectEdit>
            </el-form-item>
            <el-form-item label="账户绑定" v-if="form.full_code !== 'admin'">
                <el-select v-model="form.user_sid" clearable filterable
                           style="width: calc(100% - 28px);display: inline-block;vertical-align: top;">
                    <el-option v-for="(item, index) in userTreeData" :key="index"
                               :label="item.name" :value="item.sid" />
                </el-select>
                <el-button type="primary" size="mini" icon="el-icon-refresh"
                           @click="getUserTreeData()" />
            </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogOption.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate()" v-btnLoading>确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import sysGroupPersonApi from "@common/api/system/sysGroupPersonApi";
import sysUserApi from "@common/api/system/sysUserApi";

export default {
    provide() {
        return {
            setChildrenRef: (name, ref) => {
                this[name] = ref;
            },
            getChildrenRef: (name) => {
                return this[name];
            },
            getRef: () => {
                return this;
            },
        };
    },
    props: {
        options: {
            type: Object,
            default() {
                return {};
            },
        },
        treeNodeKey: {
            type: Object,
            default() {
                return {};
            },
        },
        treeData: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    data() {
        return {
            treeOptions1: {
                ref: "$groupTree",
                value: "sid",
                defaultExpandAll: true,
                props: {
                    label: "name",
                    children: "childrens",
                    value: "sid",
                },
            },
            option: {
                multiple: false,
                // multipleLimit:1,
                field: "group_sid", //选择的data写入model的字段
                value: "sid", //传空时整个data返回
                label: "name",
                style: "max-height:30vh",
                valueType: "String",
                props: {
                    value: "sid",
                },
            },
            userTreeData: [], //账户列表
            userTreeOptions: {
                ref: "$userTree",
                value: "sid",
                defaultExpandAll: true,
                props: {
                    label: "name",
                    children: "childrens",
                    value: "sid",
                },
            },
            userOption: {
                multiple: false,
                // multipleLimit:1,
                field: "group_sid", //选择的data写入model的字段
                value: "sid", //传空时整个data返回
                label: "name",
                style: "max-height:30vh",
                valueType: "String",
                props: {
                    value: "sid",
                },
            },
            //弹窗option
            dialogOption: {
                title: "新增",
                visible: false,
            },
            form: {
                code: "",
                name: "",
                birth: "",
                user_sid: "",
                phone: "",
                sex: 1,
                group_sid: this.treeNodeKey.sid || null,
            },
            sexOptions: [
                {
                    value: 0,
                    label: "未知性别",
                },
                {
                    value: 1,
                    label: "男",
                },
                {
                    value: 2,
                    label: "女",
                },
            ],
            rules: {
                group_sid: [ { required: true, message: "请选择部门", trigger: "blur" } ],
                code: [
                    { required: true, message: "请输入工号", trigger: "blur" },
                    {
                        // pattern: /^[A-Za-z0-9+-_.]{1,32}$/,
                        // message:
                        //   "最大32位字符，大小写英文、数字或者以下特殊字符（+-_.），不能包含特殊字符",
                        max: 32,
                        message: "最大 32 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                    //目前只兼容中文、大小写英文、数字
                    {
                        // pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{1,50}$/,
                        // message:
                        //   "最大 50 位大小写英文、数字或者其它地区语言字符，不能包含特殊字符",
                        max: 50,
                        message: "最大 50 位字符，内容过长，请删减",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    watch: {
        options: {
            handler() {
                this.initOptions(this.options);
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
        let $this = this;
        $this.initOptions();
        $this.getUserTreeData();
    },
    methods: {
        async getUserTreeData() {
            let $this = this;
            $this.userTreeData = [];
            let queryData = {
                nopage: "1",
            };
            if ($this.form && $this.form.user_sid) {
                queryData.user_sid = $this.form.user_sid;
            }
            console.log($this.form);
            await sysUserApi.findUnBindSysUser(queryData, (result) => {
                if (result.data) {
                    $this.userTreeData = result.data;
                }
            });
        },
        handleUserTreeEvent(event, data) {
            //接受选择账户传递的数据
            console.log("user", event, data);
        },
        handleTreeEvent(event, data) {
            //接受树传递的数据
            console.log("event11", event, data);
        },
        async initOptions() {
            let $this = this;
            $this.dialogOption = $.extend({}, $this.dialogOption, $this.options);
        },
        beforeClose(done) {
            console.log(1, this.form);
            this.$refs.form.resetFields();
            console.log(2, this.form);
            done();
        },
        //新增/编辑
        async openDialog(row, type) {
            let $this = this;
            if (row) {
                $this.form = Object.assign({}, row);
            }
            if ($this.form.sid !== 'admin') {
                await $this.getUserTreeData();
            }
            console.log(this.$groupTree);
            // if ($this.form.group_sid)
            //   $this.$nextTick(() => {
            //     $this.$groupTree.setCurrentKey($this.form.group_sid);
            //   });
            let title = type === "add" ? "创建" : "编辑";
            // if (type === "edit") {
            //   if ($this.$utils.isNotEmpty(row)) {
            //     await sysGroupPersonApi.findBaseCodeRuleItems(
            //       { code_rule_sid: row.sid },
            //       (result) => {
            //         console.log("result", result);
            //         if (result.data && result.data.length) {
            //           $this.form.data_list = result.data;
            //         } else
            //           $this.form.data_list = JSON.parse(JSON.stringify(this.data));
            //       }
            //     );
            //     $this.form = $.extend({}, $this.form, row);
            //   } else {
            //     $this.form.data_list = JSON.parse(JSON.stringify(this.data));
            //   }
            // } else {
            //   $this.form = {};
            //   $this.form.data_list = JSON.parse(JSON.stringify(this.data));
            // }
            // $this.delIdsList = [];
            $this.dialogOption = $.extend({}, $this.dialogOption, {
                title: title,
                visible: true,
            });
        },
        //保存/更新
        async saveOrUpdate(type) {
            let $this = this;
            $this.$refs["form"].validate(async (valid) => {
                if (valid) {
                    await sysGroupPersonApi.saveSysGroupPerson($this.form, (result) => {
                        console.log("result", result);
                        if (result.code === 0) {
                            $this.dialogOption = $.extend({}, $this.dialogOption, {
                                visible: false,
                            });
                            $this.$emit("event", {
                                type: "refresh",
                            });
                            $this.$bus.$emit('updateSystemDashboard');
                        }
                    });
                } else {
                    return false;
                }
            });
        },
    },
};
</script>
<style lang="less" rel="stylesheet/less">
.small_dialog .el-select {
    display: block;

    .el-input__inner {
        width: 100%;
    }
}

.small_dialog {
    width: 100vw;

    .el-dialog {
        width: 600px;
    }
}
</style>
